<template>
	<view class="contain">
		<view class="" style="background: #fff;">
			<u-cell-group >
				<u-cell @click="tapDevice"  style="background: #fff;"
				    size="large"
				    title="设备"
				    :value="device"
				    isLink
				></u-cell>
			</u-cell-group>
		</view>
		
		<view class="" v-if="tfdepartmentTag">
			<ljs-treeChoose
				:show="ljs_tree3.departmentTag"
				v-model="ljs_tree3.department"
				:ids="ljs_tree3.chooseIds"
				:checkStrictly="ljs_tree3.checkStrictly"
				chooseMode="ico"
				title="设备选择"
				@getChooseValue="ljs_tree3GetChooseValue"
				@close="ljs_tree3CloseTree">
			</ljs-treeChoose>
		</view>
		<u-row  customStyle="padding: 0 5px 0 5px;margin-top: 5px;"  v-for="(item,i) in videoUrlList" :key="i" >
			<u-col span="12">
				<view class="demo-layout bg-white">
					<view class="deviceclass" style="overflow: hidden;word-break: break-all;width: 100%;">
						设备名称：<text style="color:#606266;overflow: hidden;font-weight: 500;">{{item.name}}</text>
					</view>
					<view class="deviceclass">
						在线状态：
						<text style="font-weight: 500;"  :style="{color:item.switch?'#1cb8a7':'#fa3534'}">{{item.switch?'已开启':'已关闭'}}</text>
					</view>
					<view class="deviceclass grace-title">
						<view class="" @click="previewingVideo(item.indexCode)" >
						   <text class="iconfont icon-zaixianzhibo" style="color: #1cbba7;font-size: 14px;"></text>
						   <text style="margin-left: 3rpx;font-weight: 500;" >在线观看</text>
						</view>
						<u-switch v-if="videoUrlList.length>0"
							space="2" v-model="item.switch" activeColor="#1cb8a7"  asyncChange @change="asyncChange(i)"
							inactiveColor="rgb(230, 230, 230)">
						</u-switch>
					</view>
				</view>
			</u-col>
		</u-row>
		<u-tabbar :value="tabbarIndex" @change="click" :fixed="true" :border="true" activeColor='#1cb8a7'>
			<u-tabbar-item text="宝贝在线" icon="edit-pen-fill" @click='clickTabbar'></u-tabbar-item>
			<u-tabbar-item text="设备控制" icon="file-text-fill" @click='clickTabbar'></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import ljsTreeChoose from '../components/ljs-treeChoose/ljs-treeChoose.vue';
	import {
	hikNodes,
	hikSearch,
	saveBatch,
	deleteBatch,
	listTable
	} from '@/api/Hik.js'     
	
	export default {
		components: {
			ljsTreeChoose
		},
		data() {
			return {
				videoUrlList: [],
				tabbarIndex:1,
				device:'',
				ljs_tree3: {
					departmentTag: false,
					department: [],
					departmentName: "",
					checkStrictly: true, // 任意级都可选
					chooseIds: [], // 选择tree的id数据结果集合
				},
				value11: false,
				tfdepartmentTag: false,
				operateData: [],
				listTabledata:[],
				uniqueArr:[],
				ikl:[]
			}
		},
		onLoad() {
			this.hikNodes();
			this.listTable();
		},
		onHide() {
			  this.submit()	//提交数据	
		},
		onUnload(){
			  this.submit()	 //提交数据	
			
		},
		methods: {
			listTable(){
				listTable({pageSize:100}).then(
					res => {
						if (res.data.code=='0') {
						   this.listTabledata = res.data.data.list;
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.loading=false;
						this.$api.showTip('服务器错误')
					}
				);
			},
			
			listToTree(list) {
			  let map = {}, tree = [];
			  for (let i = 0; i < list.length; i++) {
			    map[list[i].indexCode] = i;
			    list[i].children = [];
				list[i].id = list[i].indexCode;
				list[i].label = list[i].name;
				list[i].disabled = false;
				list[i].type = null;
			  }
			  for (let i = 0; i < list.length; i++) {
			    let node = list[i];
			    if (node.parentIndexCode !== '-1') {
					list[map[node.parentIndexCode]].children.push(node);
			    } else {
			      tree.push(node);
			    }
			  }
			  return tree;
			},
			
			hikNodes(){
				hikNodes({pageSize:1000}).then(
					res => {
						if (res.data.code=='0') {
							this.ljs_tree3.department = this.listToTree(res.data.data.list);
							if(this.ljs_tree3.department.length){
								this.tfdepartmentTag=true;
							}
						 let  paramlist = this.getTreeData(this.ljs_tree3.department);
						 this.ljs_tree3GetChooseValue([paramlist[0].id],[paramlist[0]]);
						}else{
							this.$api.showTip(res.data.msg);
							
						}
					},
					err => {
						this.$api.showTip('服务器错误');
					}
				);
			},
			
			getTreeData(data,datacop) {
				// 循环遍历json数据
				for (var i = 0; i < data.length; i++) {
					if (data[i].children.length == 0) {
							this.ikl.push(data[i]);
							break;
					}else {
						this.ikl.push(data[i]);
						this.getTreeData(data[i].children);
					}
					
				}
				return this.ikl;
			},
			
			clickTabbar(e) {
				this.tabbarIndex = e
				if (this.tabbarIndex == 0) {
					uni.navigateTo({
						url: '/pages/subPack/babyOnline/list'
					})
				} else if (this.tabbarIndex == 1) {
					uni.navigateTo({
						url: '/pages/subPack/babyOnline/add'
					})
				}
			},
			click(){},
			// 单选，任意级都可选 - 打开
			tapDevice() {
				this.ljs_tree3.departmentTag = true;
			},
			// 单选，任意级都可选 - 关闭
			ljs_tree3CloseTree(val){
				this.ljs_tree3.departmentTag = val;
			},
			// 单选，任意级都可选 - 获取
			// ids: 集合
			// items: 节点对象集合
			ljs_tree3GetChooseValue(ids, items){
				this.ljs_tree3.chooseIds = ids;
				this.device = "";
				items.forEach((item, i)=>{
					this.device += item.label + "-";
				});
				this.device = this.device.substring(0, this.device.length - 1);
				this.hikSearch(ids);
			},
			asyncChange(e) {
				this.videoUrlList[e].switch = !this.videoUrlList[e].switch;
				this.operateData.push(this.videoUrlList[e]); 
				this.uniqueArr = this.operateData.filter((value, index, self) => {
				  return self.indexOf(value) === index;
				});
				
			},
			hikSearch(ids){
				let param={
					"isSubRegion": true,
					"pageNo": 1,
					"pageSize": 1000,
					"regionIndexCodes": [ids[ids.length-1]]
				}
				hikSearch(param).then(
					res => {
						if (res.data.code=='0') {
							this.videoUrlList =  res.data.data.list.map(qw=>{
								qw.switch = false;
								this.listTabledata.forEach(wq=>{
									if(qw.indexCode == wq.indexCode){
										qw.switch = true;
									}
								})
								return qw;
							})
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.$api.showTip('服务器错误')
					}
				);
			},
			submit(){
				let closeData = []; //关的数据
				let openDate = [];
				this.listTabledata.forEach(uj=>{
					this.uniqueArr.forEach(mk=>{
						if(uj.indexCode == mk.indexCode){
							// 操作了旧的数据，旧的数据只负责关
							if(!mk.switch){
								closeData.push(mk);
							}
						}else{
							if(mk.switch){
								openDate.push(mk);
							}
						}
					})
				})
				let newopenDate = [];
				newopenDate = openDate.filter((values, indexs, selfs) => {
				  return selfs.indexOf(values) === indexs;
				});
				let closeDatapush = [];
				if(closeData.length>0){
					closeData.forEach(jk=>{
						closeDatapush.push({'indexCode':jk.indexCode,'name':jk.name})
					})
					// 此处写关闭开关的数据提交
					deleteBatch(closeDatapush).then(
					res => {
						if (res.data.code=='0') {
							// this.$api.showTip('操作成功')
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.$api.showTip('服务器错误')
					}
					)
				}
				
				let parampush = []; //是最后操作的数组
				if(newopenDate.length>0){
				newopenDate.forEach(jk=>{
					parampush.push({'indexCode':jk.indexCode,'name':jk.name})
				})
					saveBatch(parampush).then(
					res => {
						if (res.data.code=='0') {
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.$api.showTip('服务器错误')
					}
					);
				}
			},
			
			previewingVideo(e){
				uni.navigateTo({
					url: 'video?indexCode=' + e
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		margin-top: 10px;
	}

	uni-video{
	  width: 100%;
	  height: 109px;
	  display: inline-block;
	  line-height: 0;
	  overflow: hidden;
	  position: relative;	
	}
	.deviceclass{
		padding: 2px;
		line-height: 2.5;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
	}
	
	.bg-white{
		background-color: #ffffff;
		padding-left: 5px;
	}
	
	.ellipsis {
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	  width: 200px;
	  height: 40px;
	}
	
	.grace-title{ display:flex; flex-wrap:nowrap;justify-content:space-between; font-weight:normal; align-items:center;}
	/deep/.u-cell__value--large{
		width: 80%;
	}
	
	/deep/.u-cell__title-text.data-v-1c4434ae {
	    font-weight: 700;
	}
	
</style>
